define([
	'jquery',
	'backbone',
	'hbs!templates/menu',
], function ($, Backbone, template) {

	MenuView = Backbone.View.extend({

		initialize: function () {
			if (this.model) {
				this.model.on('change', this.render, this);
			}
		},
		
		evenst: {
			"click .menu": "changeMenu"
		},
		
		changeMenu: function(event) {
			var target = event.target;
			var menuId = $(target).attr('id');
			if (this.model.get('menus')) {
				for(var i = 0; i < this.model.get('menus');i++) {
					var menu = this.model.get('menus')[i];
					if (menu.menuId == menuId) {
						menu.active = true;
					} else {
						menu.active = false;
					}
				}
			}
			this.model.trigger('change');
		},

		render: function () {
			var json = this.model.toJSON();
			var html = template(json);
			this.$el.html(html);
		}
	});

	return MenuView;
});
